<template>
  <div class="container">
    <div class="sateInfo">
      <div class="info_text">
        <h2>河北大唐国际张家口热电有限责任公司</h2>
        <ul>
          <li>
            <span>建站时间：</span>2019/03/19
          </li>
          <li>
            <span>地理位置：</span>河北省张家口市高新区
          </li>
          <li>
            <span>供热方式：</span>钢铝复合
          </li>
          <li>
            <span>机组数量：</span>6
          </li>
        </ul>
      </div>
      <div class="crew">
        <div class="item_crew">
          <h2>机组1</h2>
          <div class="crew_list">
            <ul>
              <li>
                <div class="top">
                  <img src="../../assets/xhb.png" alt="1">
                  <h2>循环泵1</h2>
                </div>
                <div class="bottom">
                  <p>功率：15kW</p>
                  <p>规格：1</p>
                </div>
              </li>
              <li>
                <div class="top">
                  <img src="../../assets/xhb.png" alt="1">
                  <h2>循环泵1</h2>
                </div>
                <div class="bottom">
                  <p>功率：15kW</p>
                  <p>规格：1</p>
                </div>
              </li>
              <li>
                <div class="top">
                  <img src="../../assets/xhb.png" alt="1">
                  <h2>循环泵1</h2>
                </div>
                <div class="bottom">
                  <p>功率：15kW</p>
                  <p>规格：1</p>
                </div>
              </li>
              <li>
                <div class="top">
                  <img src="../../assets/xhb.png" alt="1">
                  <h2>循环泵1</h2>
                </div>
                <div class="bottom">
                  <p>功率：15kW</p>
                  <p>规格：1</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.container {
  ul li {
    list-style: none;
  }
  h2 {
    font-weight: normal;
  }
  .sateInfo {
    //站点信息
    text-align: left;
    padding: 0.04rem;
    .info_text {
      h2 {
        font-size: 0.16rem;
        padding: 0.1rem 0;
      }
      ul {
        margin: 0;
        padding: 0;
        li {
          line-height: 2em;
          font-size: 0.14rem;
          color: #333;
        }
      }
    }
    .crew {
      padding: 0.2rem 0;
      .item_crew {
        h2 {
          font-size: 0.16rem;
          color: #333;
        }
        .crew_list {
          width: 100%;
          overflow: auto;
          ul {
            margin: 0;
            width: 200%;
            display: flex;
            padding: 0.1rem 0;
            li {
              margin-right: 0.1rem;
              width: 1.2rem;
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: space-between;
              border: 1px solid #7f8fc3;
              border-radius: 0.1rem;
              overflow: hidden;
              .top {
                width: 100%;
                padding: 0.1rem 0.2rem;
                text-align: center;
                img {
                  width: 50%;
                }
                h2 {
                  font-size: 0.16rem;
                  color: #7f8fc3;
                  font-weight: bold;
                }
              }
              .bottom {
                width: 100%;
                padding: 0.1rem 0.14rem;
                color: #fff;
                background: #7f8fc3;
                p {
                  line-height: 2em;
                  font-size: 0.14rem;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
} //站点信息样式结束
</style>